<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>需求信息浏览</title>
  <jsp:include page="../../common/common_resources.jsp"/>
</head>
<body>
<div class="cont">
  <!--头部按钮区域新增、编辑、搜索-->
  <div class="text-center mt-d7 header-bar">
    <section class="layui-inline">
      <!--必须放在layui-form中，select样式才生效-->
      <form class="layui-form" action="" lay-filter="searchForm" style="margin-top: 5px">
        <input type="hidden" name="crtTeacherId" value="${sessionScope.user.id}"/>
        <section class="layui-form-item">
          <div class="layui-inline">
            <div class="layui-input-inline">
              <select name="searchType" lay-verify="required">
                <option value="title">需求名称</option>
                <option value="courseName">课程</option>
              </select>
            </div>
            <div class="layui-input-inline">
              <input class="layui-input" name="searchWord"
                     autocomplete="off" placeholder="请输入搜索词">
            </div>
            <div class="layui-input-inline">
              <button class="layui-btn" id="searchBtn">
                <i class="layui-icon layui-icon-search">搜索</i>
              </button>
            </div>
          </div>
        </section>
      </form>
    </section>
  </div>
  <!-- 行工具栏 layui 的 tpl语法,d代表当前行的数据 -->
  <script type="text/html" id="operationBar">
    {{#  if(!d.orderStatus){ }}
      <a class="layui-btn layui-btn-xs" lay-event="preAppoint">预约</a>
    {{#  } else { }}
      {{d.orderStatus}}
    {{#  } }}
  </script>
  <!--表格区域-->
  <section>
    <table id="table" lay-filter="test"></table>
  </section>
</div>
<script>
  layui.use(['table', 'jquery', 'form','layer'], function (table,$,form,layer) {
    // 表格渲染
    table.render({
      elem: '#table'
      , id:"tb" // 未设置的话取table#id的值
      , height: 'full-70' // 高度为屏幕高度-70px
      , method: "post"
      , url: '<%=request.getContextPath() %>/studentDemand/loadTable'
      // 表单取值,对于select就不能使用$().val来获取值了，获取不到
      // 统一使用layui表单取值的方法
      , where: form.val("searchForm")
      , page: true // 开启分页
      , cellMinWidth: 80
      , even:true //开启隔行背景
      , cols: [[ //表头
        {field: 'id', title: '编号', sort: true}
        , {field: 'title', title: '需求名称'}
        , {field: 'courseName', title: '需求课程'}
        , {field: 'detailDesc', title: '详细描述'}
        , {field: 'publishTime', title: '发布时间'}
        , {field: 'userName', title: '发布人'}
        , {field: 'phone', title: '电话'}
        , {field: 'email', title: '邮箱'}
        // toolbar绑定工具条模板
        , {title:'操作', align: 'center', toolbar: '#operationBar'}
      ]],
      parseData: function (res) { //res 即url返回的数据
        return {
          "code": res.success ? 0 : -1, //解析接口状态
          "msg": "正在加载,请稍等...", //解析提示文本
          "count": res.data.totalCount, //解析数据长度
          "data": res.data.rows //解析数据列表
        };
      },
      request: {
        pageName: 'pageNow', //页码的参数名称，默认：page
        limitName: 'pageSize' //每页数据量的参数名，默认：limit
      }
    });
    // 行工具条事件
    table.on('tool(test)', function (obj) {
      var rowData = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
      if (layEvent === 'preAppoint') {
        var param = {};
        param["launchId"] = "${sessionScope.user.id}";
        param["targetId"] = rowData.studentId;
        param["demandId"] = rowData.id;//需求id
        if (!param["launchId"]){
          layer.open({
            content: "预约需要先登录",
            // 0:警告感叹号,1:对号,2:×号3:?号,4:锁,5:快哭了,6:开心
            icon: 2,
            // 0:从内到外,1:从上到下,2:从下到上,3:从左到有4:从右到左5:淡入6:抖动
            anim: 6
          });
          return;
        }
        $.ajax({
          url: '<%=request.getContextPath() %>/orderInfo/add',
          method: 'post',
          data: param,
          success: function (result) {
            if (result.success) {
              layer.open({
                content: "预约已发起,请等待对方确认",
                // 0:警告感叹号,1:对号,2:×号3:?号,4:锁,5:快哭了,6:开心
                icon: 1,
                // 0:从内到外,1:从上到下,2:从下到上,3:从左到有4:从右到左5:淡入6:抖动
                anim: 0
              });
              table.reload("tb");// 当前页刷新,会去配置的where中携带参数
            } else {
              layer.msg(result.errMsg);
            }
          }
        });
      }
    });
    // 搜索
    $("#searchBtn").click(function () {
      reloadTable(1);
      // 按钮放在layui-form中点击就会触发提交,这里返回false不让他提交
      return false;
    });
    // 默认是在弹出框弹出时的那个pageNow reload
    function reloadTable(toPageNum) {
      table.reload("tb",{
        where: form.val("searchForm"),
        page:{
          curr:toPageNum
        }
      });
    }
  });
</script>
</body>
</html>